<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="__PUBLIC__/Css/Admin/Bootstrap/bootstrap.min.css" rel="stylesheet"  >
<link href="__PUBLIC__/Js/jqui/jquery-ui.min.css" rel="stylesheet"  >
<script src='__PUBLIC__/Js/jquery-3.1.0.min.js'></script>
<script src='__PUBLIC__/Js/jqPaginator.js'></script>
<script src='__PUBLIC__/Js/jqui/jquery-ui.min.js'></script>
 <style> 
    .pagelist{ 
      text-align:center; 
      background:#f1f1f1; 
      padding:7px 0;
    }
    .pagelist a{
      text-decoration: none; 
      margin:0 5px; 
      border:#6185a2 solid 1px;   
      display:inline-block;
      padding:2px 6px 1px; 
      line-height:16px; 
      background:#fff; 
      color:#6185a2;
    }
    /*点击页码之后改变此点击页码的字体颜色和背景色，span为分页类内部的标签*/
    .pagelist span{
      margin:0 5px;
      border:#6185a2 solid 1px;
      display:inline-block;
      padding:2px 6px 1px; 
      line-height:16px;
      color:#fff; 
      background:#6185a2;
    }
	#but_as,#but_d{
		border:0px;
		border-radius:4px;
	}
   #dialog-confirm{		
	    display:none;
		}
  </style>
</head>
<body>
	<div id="dialog-confirm" >
		确定要删除？删除后不可恢复
	</div>
<div id='msg' class="btn btn-warning" style="display:none;position:absolute;margin-left:500px;"></div>
<table class='table table-striped'>   
<thead>
	     <tr><th colspan='11'>商品列表</th></tr>
	     <tr>
	     	<th colspan=10>
	     	   <form class="form-inline" role="form" action="<{:U('goods')}>" >
					<div class="form-group">
						<input type="text" class="form-control" name="key" id='key' placeholder="请输入商品名称"> 	   
					</div>
					<button type="submit" class="btn btn-default">查询</button>
				</form>
	        </th>
			 <th><a href="<{:U('ShowProd/addpro')}>"><button type='button' name='but_add' class='btn btn-primary'>添加</button></a>
			 </th>
		 </tr>	 
		    <tr> 
			    <th><input type="checkbox" id='all'/></th>
		        <th>ID</th> 
		        <th>商品名</th>
				<th>分类</th>  
		        <th>图片</th> 
		        <th>上/下架</th> 
				<th>商品描述</th> 
		        <th>价格</th> 
		        <th>库存</th> 
		        <th>品牌</th>
				<th>操作</th> 
		    </tr>
			<volist name='goods' id='vo'> 
			<tr id='goods_<{$vo.id}>'>
				<td><input type="checkbox" class='box' data-box="<{$vo.id}>"/></td>
				<td>
					<{$vo.id}>
				</td>
				<td>
					<{$vo.goods_name}>
				</td>
				<td>
					<{$vo.顶级分类}>-><{$vo.二级分类}>
				</td>
				<td>
					<img src="__ROOT__/Uploads/prod/<{$vo.goods_pic}>" alt="" height=50px width=100px />
				</td>
				<td>
					<if condition="($vo.up_down eq 1)">上架
						<else /> 下架
					</if>
				</td>
				<td>
					<{$vo.goods_desc}>
				</td>
				<td>
					<{$vo.goods_price}>
				</td>
				<td>
					<{$vo.goods_num}>
				</td>
				<td>
					<{$vo.brand_name}>
				</td>
				
				 <td>
			        <a href="<{:U('ShowProd/editgoods')}>?id=<{$vo.id}>"><button type='button' name='but_edit' class='btn btn-success'>编辑</button></a>
			&nbsp;<button type='button' data-id="<{$vo.id}>" name='but_del' class='btn btn-danger'>删除</button>
			        </td> 
			</tr>
		    </thead>	
			</volist>
			<tr>
				<td colspan=11>
					<input type="button" value='反选' id='but_as'/>
					<input type="button" value='删除' id='but_d'/>
			
			</td></tr>
</table>

   
 <div class='pagelist'> <{$page}> </div<!--分页输出-->
               
                

<script>

	
		//自动完成
		$( "#key" ).autocomplete({
            source: "<{:U('autoKey')}>"
         });
		 //删除
			$(document).on('click','[name=but_del]',function(){
			var id=$(this).attr('data-id');
		   $("#dialog-confirm").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'删除确认',
		      buttons: {
		        "确认": function() {							
					  	$.get("<{:U('goodsdel')}>",{id:id},function(data){
						if(data.status==1){
							$("#goods_"+id).remove();
							$('#msg').text(data.msg);
							$('#msg').css('display','block');
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
						}else{
							$('#msg').text(data.msg);
							$('#msg').css('display','block');
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
						}
					},'json');
			      
		          $( this ).dialog( "close" );
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });	
		}) 
		//全选反选
    $(document).on('click','#all',function(){  
	        $('.box').prop('checked',$(this).prop('checked'));
		
   });
	  $(document).on('click','#but_c',function(){  
	        $('.box').prop('checked','');
	  });
	 
	 $(document).on('click','#but_as',function(){
       $('.box').each(function(k,v){
	    var flag=$(v).prop('checked');
	       $(v).prop('checked',!flag);
	   });
	 });
	 $(document).on('click','#but_d',function(){
	 	var arr=[];
		$('.box').map(function(k,v){
			var flag=$(v).prop('checked');
			if(flag){				
				arr.push($(v).attr('data-box'));			
			} 
		});
	if($('.box:checked').prop('checked')){
	 $.get("<{:U('doDel_all')}>",{row:arr},function(data){	
					if(data.status==1){
						for (var i=0;i<=arr.length;i++){
							$("#goods_"+arr[i]).remove();
						}	
							$('#msg').text(data.msg);
							$('#msg').css('display','block');
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
					}else{
						$('#msg').text(data.msg);
						$('#msg').css('display','block');
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);
					}
				},'json'); 
	 
         } 
});

</script>
</body>
</html>